<template>
	<div class="w100 p1 h60 bgcfff bsbb" style="border: #e6e6e6 1px solid;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
		<div class="da">
			<div v-for="(item, index) in auditList" :key="index">
				<div
					:class="queryParams.status == item.id ? ' w6 h1 lh1 bgc2f6 cfff br1 tac fz08 p04' : 'b03 w6 h1 lh1 br1 tac c999 fz08 p04 '"
					style="margin-right: 1rem;"
					@click="clickAudit(item.id)"
				>
					{{ item.name }}
				</div>
			</div>
		</div>
		<div>
			<el-table
				:data="tableData"
				v-loading="loading"
				border
				height="55rem"
				style="width: 100%;margin-top: 0.5rem;"
				:header-cell-style="{ background: '#2F6BBB', color: '#FFFFFF', border: '#2F6BBB' }"
				:cell-style="{ border: '#ffffff' }"
				:row-style="{ height: '0.5rem' }"
			>
				<el-table-column prop="s_id" label="审核员" align="center"></el-table-column>
				<el-table-column prop="sub_username" label="提交员" align="center"></el-table-column>
				<el-table-column prop="sub_phone" label="提交员电话" align="center"></el-table-column>
				<el-table-column prop="sub_time" label="提交时间" width="180" align="center">
					<template slot-scope="scope">
						<span>{{ formatDate(scope.row.sub_time) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="reject_content"
					label="驳回原因"
					show-overflow-tooltip
					width="120"
					align="center"
					:key="Math.random()"
					v-if="queryParams.status == 2"
				></el-table-column>
				<el-table-column prop="number" label="钻孔编号" align="center"></el-table-column>
				<el-table-column fixed="right" align="center" width="290" label="操作">
					<template slot-scope="scope">
						<div class="tac dfj">
							<div class="c2f cp" @click="detailImg(scope.row.image)">
								<i class="el-icon-picture-outline"></i>
								查看图片
							</div>
							<div class="c2f cp" @click="upload(scope.row)">
								<i class="el-icon-view"></i>
								查看
							</div>
							<div class="c2f cp" @click="uploadUpdate(scope.row)" v-if="queryParams.status == 2">
								<i class="el-icon-edit-outline"></i>
								编辑
							</div>
							<div class="c2f cp" @click="uploadFlow(scope.row)">
								<i class="el-icon-guide"></i>
								查看流程
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="tar mt05">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="queryParams.pageSize"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="400"
				></el-pagination>
			</div> -->
		</div>
		<!-- 查看大图 -->
		<dialogImg :lookImg="lookImg" :biggerImg="biggerImg" @handleClose="handleClose" v-if="biggerImg"></dialogImg>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleCloses">
			<div style="height: 20rem;">
				<div class="top-reject">
					<img v-if="status.five == 0" src="../../assets/flow/reject.png" alt="" />
					<img v-else src="../../assets/flow/reject-c.png" alt="" />
				</div>
				<div class="flow">
					<!-- <img style="width: 6rem;height: 6rem;" src="../../assets/flow/bigen.png" alt="" /> -->
					<img style="width: 6rem;height: 6rem;" src="../../assets/flow/bigen-c.png" alt="" />
					<span class="lins-c">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
					</span>
					<!-- <img style="width: 6rem;height: 6rem;" src="../../assets/flow/submitter.png" alt="" /> -->
					<img style="width: 6rem;height: 6rem;" src="../../assets/flow/submitter-c.png" alt="" />
					<span :class="status.one == 0 ? 'lins' : 'lins-c'">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
						<div class="font-line">提交审核</div>
					</span>
					<img v-if="status.one == 0" style="width: 6rem;height: 6rem;" src="../../assets/flow/yuan.png" alt="" />
					<img v-else style="width: 6rem;height: 6rem;" src="../../assets/flow/yuan-c.png" alt="" />
					<span :class="status.two == 0 ? 'lins' : 'lins-c'">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
						<div class="font-line">审核通过</div>
					</span>
					<img v-if="status.two == 0" style="width: 6rem;height: 6rem;" src="../../assets/flow/ju.png" alt="" />
					<img v-else style="width: 6rem;height: 6rem;" src="../../assets/flow/ju-c.png" alt="" />
					<span :class="status.three == 0 ? 'lins' : 'lins-c'">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
						<div class="font-line">审核通过</div>
					</span>
					<img v-if="status.three == 0" style="width: 6rem;height: 6rem;" src="../../assets/flow/end.png" alt="" />
					<img v-else style="width: 6rem;height: 6rem;" src="../../assets/flow/end-c.png" alt="" />
				</div>
				<div class="bottom-reject">
					<img v-if="status.four == 0" src="../../assets/flow/bottom-reject.png" alt="" />
					<img v-else src="../../assets/flow/bottom-reject-c.png" alt="" />
				</div>
			</div>
			<span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
		</el-dialog>
	</div>
</template>

<script>
import { examineSub, flowChart } from '@/api/user.js';
import { getItem } from '@/utils/storage.js';
import dialogImg from '@/components/dialogImg.vue';
export default {
	name: '',
	components: {
		dialogImg
	},
	data() {
		return {
			queryParams: {
				status: 0,
				token: getItem('token'),
				data_category: null
			},
			lookImg: '',
			biggerImg: false,
			loading: false,
			auditList: [{ name: '待审核', id: 0 }, { name: '审核通过', id: 1 }, { name: '审核未通过', id: 2 }],
			tableData: [],
			dialogVisible: false,
			status: {
				one: 0,
				two: 0,
				three: 0,
				four: 0,
				five: 0
			}
		};
	},
	watch: {
		$route: {
			handler() {
				//监听参数变化时去请求
				this.getAuditList();
				//深度监听，同时也可监听到query参数变化
			},
			deep: true
		}
	},
	created() {
		this.getAuditList();
	},
	methods: {
		getAuditList() {
			this.queryParams.data_category = parseInt(this.$route.query.id);
			this.loading = true;
			examineSub(this.queryParams).then(res => {
				this.loading = false;
				if (res.data == '') {
					this.tableData = [];
					this.msgSuccess(res.msg);
				} else {
					this.tableData = res.data;
				}
			});
		},
		clickAudit(val) {
			this.queryParams.status = val;
			this.getAuditList();
		},
		upload(val) {
			this.$router.push({
				path: '/drillDetails',
				query: {
					id: val.id
				}
			});
		},
		uploadFlow(val) {
			flowChart(val.id, val.data_category).then(res => {
				if (res.code == 1001) {
					this.dialogVisible = true;
					this.status = res.data;
				}
			});
		},
		handleCloses() {
			this.dialogVisible = false;
		},
		//查看图片
		detailImg(val) {
			this.lookImg = val;
			this.biggerImg = true;
		},
		handleClose(val) {
			this.biggerImg = val;
		},
		uploadUpdate(val) {
			this.$router.push({
				path: '/addDrill',
				query: {
					val,
					updateVal: 1
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #2f6bbb;
}
.top-reject {
	position: absolute;
	top: 8rem;
	left: 16.25rem;
	img {
		width: 27rem;
		height: 4rem;
	}
}
.flow {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	.lins {
		display: inline-block;
		padding: 0 0.3rem;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		color: rgb(153, 153, 153);
		font-weight: bold;
		font-size: 0.9rem;
		.line {
			display: flex;
			align-items: center;
			.straight {
				display: inline-block;
				width: 5rem;
				height: 0.4rem;
				background-color: rgb(153, 153, 153);
			}
			.triangle {
				width: 0;
				height: 0;
				overflow: hidden;
				font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
				line-height: 2px; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
				border-width: 10px;
				border-style: solid; /*ie6下会出现不透明的兼容问题*/
				border-color: transparent transparent transparent rgb(153, 153, 153);
			}
		}
	}
	.lins-c {
		display: inline-block;
		padding: 0 0.3rem;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		color: #1264b6;
		font-weight: bold;
		font-size: 0.9rem;
		.line {
			display: flex;
			align-items: center;
			.straight {
				display: inline-block;
				width: 5rem;
				height: 0.4rem;
				background-color: #1264b6;
			}
			.triangle {
				width: 0;
				height: 0;
				overflow: hidden;
				font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
				line-height: 2px; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
				border-width: 10px;
				border-style: solid; /*ie6下会出现不透明的兼容问题*/
				border-color: transparent transparent transparent #1264b6;
			}
		}
	}
}
.bottom-reject {
	position: absolute;
	top: 18.5rem;
	left: 16.25rem;
	img {
		width: 14rem;
		height: 4rem;
	}
}
.el-button {
	width: 7rem !important;
}
</style>
